
import React, { useEffect, useState } from 'react'
import { FormItem } from '../../../components/VForm/interface'
import VForm from '../../../components/VForm'
import { Button, DatePicker, Form, Select, Upload, message } from 'antd'
// import './index.css'
import { SumbitRefuel } from './service'
import { UploadOutlined } from '@ant-design/icons'
import { getVehicleInfoList } from '../../Statistics/VehicleStatusOverview/service'


export default function VehicleRefuelRegistration() {
  const [form] = Form.useForm()
  const [vehicleInfo,setVehiclesInfoList] = useState([]);
  const filterOption = (input: string, option?: { label: string; value: string }) =>
    (option?.label ?? '').includes(input);
  const formItems: FormItem[] = [
 
    {
      name: 'card_id',
      label: '卡号',
      required: true,
      type: 'input',
      rule: { len: 4, message: '长度为4位' },
    }
    ,{
      name: 'vehicle_id',
      label: '车牌号',
      required: true,
      type:"custom",
      rule:{pattern:new RegExp('^[京津沪渝冀豫云辽黑湘皖闽鄂赣甘⽢桂贵琼陕青藏川宁新港澳台苏浙][A-HJ-NP-Z][·][A-HJ-NP-Z0-9]{5,6}$'),message:'请输入正确的车牌号，例如浙A·XD111'},
      customNode: vehicleInfo.length>0? <Select showSearch filterOption={filterOption} options={vehicleInfo.map((item:any)=>{
        return {label:item.vehicle_id,value:item.vehicle_id}
      })}   />: <>无</>
    },
    {
      name: 'refuel_amount',
      label: '加油金额',
      required: true,
      type: 'input',
    },
    {
      name: 'refuel_date',
      label: '加油日期',
      required: true,
      type:"custom",
      customNode: <DatePicker style={{width:"100%"}}/>,
    },
    {
      name:"bill",
      label:"发票",
      required:true,
      type:"custom",
      customNode: (
        <Upload  name="file" action="http://localhost:8081/avatar/upload" listType="picture" onChange={(info)=>{
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
            console.log(info.file.response);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功`);
            console.log(info.file.response);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败`);
          }
          
        }}>
          <Button  icon={<UploadOutlined />}>点击上传</Button>
        </Upload>
      )
    }
  ]
  const handleSumbit = async () => {
    const values=form.getFieldsValue();
    values.refuel_date=values.refuel_date.format('YYYY-MM-DD');
    values.bill=values.bill.file.response.data;
    /** 接口 */
    await SumbitRefuel(values).then(res=>{
      if(res.data.result==="SUCCESS"){
        message.success('提交成功');
        form.resetFields();
      }
    })
  }
  useEffect(() => {
    const queryList = async () => {
      await getVehicleInfoList().then(res => {
        setVehiclesInfoList(res.data.data)
      })
    }
    queryList();
  },[])
  return (
    <div className="Vform-container">
      <div className="Vform">
        <VForm formItems={formItems} form={form} />
      </div>

      <div className="sumbit-btn">
        <Button type="primary" onClick={handleSumbit}>
          提交
        </Button>
      </div>
    </div>
  )
}
